import React from 'react';

export type ProgressBarSize = 'sm' | 'md' | 'lg';

export interface ProgressBarProps {
  value?: number; // 0 - 100，仅在 indeterminate=false 时生效
  indeterminate?: boolean;
  size?: ProgressBarSize;
  showLabel?: boolean; // 是否显示百分比
  labelFormatter?: (value: number) => string; // 自定义标签显示
  className?: string; // 额外容器样式
  trackClassName?: string; // 轨道样式覆盖
  fillClassName?: string; // 填充样式覆盖
  'aria-label'?: string;
}

const sizeToHeight: Record<ProgressBarSize, string> = {
  sm: 'h-1.5',
  md: 'h-2.5',
  lg: 'h-3',
};

/**
 * 极简风格进度条，默认使用zinc/slate中性色。
 * - 确定态：使用 .progress-fill 控制宽度
 * - 不确定态：使用 .progress-indeterminate-bar 动画
 */
export const ProgressBar: React.FC<ProgressBarProps> = ({
  value = 0,
  indeterminate = false,
  size = 'md',
  showLabel = false,
  labelFormatter,
  className = '',
  trackClassName = '',
  fillClassName = '',
  'aria-label': ariaLabel,
}) => {
  const clamped = Math.max(0, Math.min(100, value));
  const heightClass = sizeToHeight[size] || sizeToHeight.md;

  return (
    <div className={`flex items-center gap-2 ${className}`}>
      <div
        className={`progress-track ${heightClass} ${trackClassName}`}
        role="progressbar"
        aria-label={ariaLabel}
        aria-valuemin={indeterminate ? undefined : 0}
        aria-valuemax={indeterminate ? undefined : 100}
        aria-valuenow={indeterminate ? undefined : clamped}
      >
        {indeterminate ? (
          <div className={`progress-indeterminate-bar ${heightClass}`} style={{ position: 'absolute' }} />
        ) : (
          <div
            className={`progress-fill ${heightClass} ${fillClassName}`}
            style={{ width: `${clamped}%` }}
          />
        )}
      </div>
      {showLabel && (
        <span className="select-none text-xs text-zinc-600 dark:text-zinc-300 tabular-nums">
          {typeof labelFormatter === 'function' ? labelFormatter(clamped) : `${clamped}%`}
        </span>
      )}
    </div>
  );
};

export default ProgressBar;
